<template>
  <view class="list">
    <view class="item">
      <view class="itemHd">
        <view class="tag">即将过期</view>

        <view class="let">
          <view class="tit">【现金券】全场通用</view>
          <view class="time">生效时间：2021.05.26-2021.12.30</view>
        </view>
        <view class="rig">
          <view class="price"><text>¥</text>40</view>
          <view class="des">满80可用</view>
        </view>

        <view class="icons">
          <view class="let"></view>
          <view class="rig"></view>
        </view>
      </view>

      <view class="itemBd">
        <view class="con">
          <view class="let">
            <text>详细信息</text>
            <i class="iconfont icon-arrow-down"></i>
          </view>

          <view class="rigt">剩余数量：5张</view>
        </view>

        <view class="content">规则01规则02</view>
      </view>

      <view class="itemFd">
        <view class="btn">删除</view>
        <view class="btn on">编辑</view>
      </view>
    </view>

    <view class="item on">
      <view class="itemHd">
        <view class="tag">即将过期</view>

        <view class="let">
          <view class="tit">【折扣券】 指定商品可用</view>
          <view class="time">生效时间：2021.05.26-2021.12.30</view>
        </view>
        <view class="rig">
          <view class="price">9<text>折</text></view>
          <view class="des">母婴专区产品可用</view>
        </view>

        <view class="icons">
          <view class="let"></view>
          <view class="rig"></view>
        </view>
      </view>

      <view class="itemBd">
        <view class="con">
          <view class="let">
            <text>详细信息</text>
            <i class="iconfont icon-arrow-down"></i>
          </view>

          <view class="rigt">剩余数量：5张</view>
        </view>

        <view class="content">规则01规则02</view>
      </view>

      <view class="itemFd">
        <view class="btn">删除</view>
        <view class="btn on">编辑</view>
      </view>
    </view>

    <view class="item on disabled">
      <view class="itemHd">
        <view class="tag">即将过期</view>

        <view class="let">
          <view class="tit">【折扣券】 指定商品可用</view>
          <view class="time">生效时间：2021.05.26-2021.12.30</view>
        </view>
        <view class="rig">
          <view class="price">9<text>折</text></view>
          <view class="des">母婴专区产品可用</view>
        </view>

        <view class="icons">
          <view class="let"></view>
          <view class="rig"></view>
        </view>
      </view>

      <view class="itemBd">
        <view class="con">
          <view class="let">
            <text>详细信息</text>
            <i class="iconfont icon-arrow-down"></i>
          </view>

          <view class="rigt">剩余数量：5张</view>
        </view>

        <view class="content">规则01规则02</view>
      </view>

      <view class="itemFd">
        <view class="btn">删除</view>
        <view class="btn on">编辑</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default() {
        return [];
      },
    },
  },

  data() {
    return {};
  },

  methods: {
    handle(type, item) {
      switch (type) {
        case "cancel":
          // this.$utils.showModal(
          //   this.$t("newAdmin.warning.title"),
          //   this.$t("newAdmin.warning.cancelOrder"),
          //   true,
          //   () => {
          //     this.Emit.$emit("handleList", type, item);
          //   }
          // );
          break;

        case "edit":
          // uni.navigateTo({
          //   url: `/admin/order/delivery/index?id=${item.id}`,
          // });
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  padding: 24rpx 24rpx 0;
}

.itemFd {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 24rpx 0;

  .btn {
    margin-left: 16rpx;
    width: 152rpx;
    height: 60rpx;
    text-align: center;
    line-height: 56rpx;
    border: 2rpx solid #a1a1a1;
    border-radius: 32px;
    color: #262626;

    &.on {
      border-color: #f84a33;
      color: #f84a33;
    }
  }
}

.itemHd {
  position: relative;
  display: flex;
  align-items: flex-end;
  margin-bottom: 24rpx;
  padding: 40rpx 0 28rpx;
  border-bottom: 1px dashed #ededed;

  .let {
    flex: 1;
    overflow: hidden;

    .tit {
      margin-bottom: 12rpx;
      font-size: 30rpx;
      color: #262626;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      font-weight: bold;
    }

    .time {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }

  .rig {
    padding-left: 10rpx;
    text-align: right;

    .des {
      font-size: 24rpx;
      color: #8c8c8c;
    }

    .price {
      color: #f0250e;
      font-size: 56rpx;
      font-weight: bold;

      text {
        font-size: 24rpx;
      }
    }
  }

  .tag {
    position: absolute;
    right: -32rpx;
    top: 0;
    padding: 4rpx 0;
    width: 140rpx;
    text-align: center;
    border-radius: 0px 20rpx 0px 12rpx;
    background: #fee8e6;
    color: #f0250e;
    font-size: 24rpx;
  }

  .icons {
    position: absolute;
    top: 100%;
    right: -32rpx;
    left: -32rpx;

    view {
      position: absolute;
      bottom: -15rpx;
      width: 30rpx;
      height: 30rpx;
      background: #f2f2f2;
      border-radius: 32px;
    }

    .let {
      left: -15rpx;
    }

    .rig {
      right: -15rpx;
    }
  }
}

.itemBd {
  .con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30rpx;
    color: #262626;

    .let {
      color: #8c8c8c;

      text {
        margin-right: 4rpx;
      }
    }

    .iconfont {
      display: inline-block;
      transition: 0.3s linear;
    }
  }

  .content {
    height: 0;
    padding: 0;
    overflow: hidden;
    transition: 0.3s linear;
    font-size: 30rpx;
    color: #8c8c8c;
  }
}

.item {
  padding: 0 32rpx;
  margin-bottom: 24rpx;
  background: #fff;
  border-radius: 20rpx;

  &.on {
    .itemBd .iconfont {
      transform: rotate(180deg);
    }

    .content {
      padding: 20rpx 0;
      height: auto;
    }
  }

  &.disabled {
    .itemHd .tag {
      background: #c8c8c8;
      color: #f9f9f9;
    }

    .itemHd .let .tit,
    .itemHd .let .time,
    .itemHd .rig .price,
    .itemHd .rig .des,
    .itemBd .con .let,
    .itemBd .con,
    .content {
      color: #c8c8c8;
    }
  }
}
</style>
